<!-- 运费模板弹出窗 -->
<template>
	<div>
		<el-dialog title="运费模板" v-model="state.isShowDialog" append-to-body center class="borderRadius10" width="1100px">
            <section>
                <el-form ref="ruleFormRef" :model="state.formData" :rules="rules" label-width="160px">
                    <el-form-item label="模板名称：">
                        <el-input v-model="state.formData.name" class="width360" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="计费方式：">
                        <el-radio-group v-model="state.formData.type">
                            <el-radio :label=1>按件数</el-radio>
                            <el-radio :label=2>按重量</el-radio>
                            <el-radio :label=3>按体积</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="配送区域及运费：">
                        <el-table :data="state.formData.chargeRegion" border class="mb15"
						:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
                            <el-table-column label="可配送区域">
                                <template #default="scope">
                                    <span>{{cityName(scope.row.regionInfos)}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column :label="state.formData.type == 1 ? '首件' : 
                                state.formData.type == 2 ? '首件重量(Kg)' : '首件体积(m³)'" show-overflow-tooltip>
                                <template #default="scope">
                                    <el-input v-model="scope.row.first" placeholder="请输入" ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="运费（元）" show-overflow-tooltip>
                                <template #default="scope">
                                    <el-input v-model="scope.row.firstPrice" placeholder="请输入" ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column :label="state.formData.type == 1 ? '续件' : 
                                state.formData.type == 2 ? '续件重量(Kg)' : '续件体积(m³)'" show-overflow-tooltip>
                                <template #default="scope">
                                    <el-input v-model="scope.row.renewal" placeholder="请输入" ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="续费（元）" show-overflow-tooltip>
                                <template #default="scope">
                                    <el-input v-model="scope.row.renewalPrice" placeholder="请输入" ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" show-overflow-tooltip>
                                <template #default="scope">
                                    <el-button text type="primary" @click="selectRegion('chargeRegion','edit',scope.row.regionInfos)">
                                        区域选择
                                    </el-button>
                                    <el-button text type="danger" @click="onSubmit(scope.$index)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button @click="selectRegion('chargeRegion','add')"><el-icon><Plus /></el-icon>区域选择</el-button>
                    </el-form-item>
                    <el-form-item label="指定包邮：">
                        <section style="width: 100%;">
                            <el-radio-group v-model="state.formData.appoint">
                                <el-radio :label=1>开启</el-radio>
                                <el-radio :label=0>关闭</el-radio>
                            </el-radio-group>
                            <section v-if="state.formData.appoint == 1">
                                <el-table :data="state.formData.freeRegion" border class="mb15"
                                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
                                    <el-table-column label="选择区域" show-overflow-tooltip>
                                        <template #default="scope">
                                            <el-input v-model="scope.row.regionInfos" placeholder="请输入" ></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column :label="state.formData.type == 1 ? '包邮件数' : 
                                    state.formData.type == 2 ? '包邮重量(Kg)' : '包邮体积(m³)'" show-overflow-tooltip>
                                        <template #default="scope">
                                            <el-input v-model="scope.row.number" placeholder="请输入" ></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="包邮金额（元）" show-overflow-tooltip>
                                        <template #default="scope">
                                            <el-input  v-model="scope.row.price" placeholder="请输入" ></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" show-overflow-tooltip>
                                        <template #default="scope">
                                            <el-button text type="primary" @click="selectRegion('freeRegion','edit',scope.row.regionInfos)">
                                                区域选择
                                            </el-button>
                                            <el-button text type="primary" @click="onSubmit(scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-button @click="selectRegion('freeRegion','add')"><el-icon><Plus /></el-icon>区域选择</el-button>
                            </section>
                        </section>
                    </el-form-item>
                    <el-form-item label="指定不送达：">
                        <section style="width: 100%;">
                            <el-radio-group v-model="state.formData.delivery">
                                <el-radio :label=1>开启</el-radio>
                                <el-radio :label=0>关闭</el-radio>
                            </el-radio-group>
                            <section v-if="state.formData.delivery == 1">
                                <el-table :data="state.formData.banRegion" border class="mb20"
                                    :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
                                    <el-table-column label="选择区域" show-overflow-tooltip>
                                        <template #default="scope">
                                            <el-input v-model="scope.row.regionInfos" placeholder="请输入" ></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" show-overflow-tooltip width="120">
                                        <template #default="scope">
                                            <el-button text type="primary" @click="selectRegion('banRegion','edit',scope.row.regionInfos)">
                                                区域选择
                                            </el-button>
                                            <el-button text type="primary" @click="onSubmit(scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-button @click="selectRegion('banRegion','add')"><el-icon><Plus /></el-icon>区域选择</el-button>
                            </section>
                        </section>
                    </el-form-item>
                    <el-form-item label="排序：">
                        <el-input v-model="state.formData.sort" class="width360" placeholder="请输入"></el-input>
                    </el-form-item>
				</el-form>
            </section>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit(ruleFormRef)">确 认</el-button>
				</span>
			</template>
		</el-dialog>
        <SelectRegion ref="selectRegionRef" @selectItem="selectItem"></SelectRegion>
	</div>
</template>

<script setup lang="ts" name="cropper">
import { reactive,ref,defineAsyncComponent,computed, } from 'vue';
import { freightTemplateSave } from '/@/api/common';
import { Plus } from '@element-plus/icons-vue'
const SelectRegion = defineAsyncComponent(() => import('/@/components/freightTemplate/selectRegion.vue'))
const selectRegionRef = ref()
const ruleFormRef = ref<FormInstance>()
// 定义变量内容

const state = reactive({
	isShowDialog: false,
    regionType: '',
    formData:{
        id: null,
        name: '',
        type: 1,
        sort: null,
        price: 0,//包邮价格
        chargeRegion: [] as Array<any>,//不包邮地区
        appoint: 0, //是否开启包邮
        freeRegion:[] as Array<any>,//包邮地区
        delivery : 0, //是否开启指定不配送区域 
        banRegion:[] as Array<any>,//包邮地区
    },
});

const rules = reactive<FormRules<any>>({

})


const cityName = (data:any) => {
    return data.map(item=> item.name).join()
};


// 打开弹窗
const openDialog = (type:string,id?:number) => {
    if(type == 'add'){
        state.isShowDialog = true;
    }else if(type == 'edit'){
        console.log(id)
        state.isShowDialog = true;
    }
};

// 区域选择弹窗
const selectRegion = (type:string,stateType:string,data?:any) => {
    state.regionType = type;
	selectRegionRef.value.openDialog(stateType,data)
};

// 模板返回值
const selectItem = (data: any) => {
    let params = {
        regionInfos:data,
    }
    if(state.regionTyp == 'freeRegion'){
        params.number = null;
        params.price = null;
    }else if(state.regionTyp == 'chargeRegion'){
        params.first = null;
        params.firstPrice = null;
        params.renewal = null;
        params.renewalPrice = null;
    }
    state.formData[state.regionType].push(params)
};

// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};

// 提交模板

const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate( async (valid, fields) => {
		if (valid) {
			let params = {
                name: state.formData.name,
                sort: state.formData.sort,
                type: state.formData.type,
                chargeRegion: state.formData.chargeRegion,
                appoint: state.formData.appoint,
                freeRegion: state.formData.freeRegion,
                delivery: state.formData.delivery,
                banRegion: state.formData.banRegion,
            }
            const { results } = await freightTemplateSave(params)
            console.log(results)
		} else {
			console.log('error submit!', fields)
		}
	})
}




// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">

</style>
